<nav class="topbar" role="navigation">
  <div class="container">
    <div class="row">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header col-sm-2">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <%= link_to("Socializer", root_path, class: "navbar-brand") %>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="topbar-collapse-1">
        <div class="col-sm-7">
          <form class="search-form" role="search">
            <div class="input-group">
              <input class="form-control" type="search" placeholder="Search">
              <span class="input-group-btn">
                <button class="btn btn-primary" type="submit"><span class="fa fa-search"></span></button>
              </span>
            </div>
          </form>
        </div>
        <div class="col-sm-3">
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <%= image_tag(current_user.avatar_url, class: "avatar") %>
                <%= current_user.display_name %>
                <span class="fa fa-angle-down fa-fw"></span>
              </a>
              <ul class="dropdown-menu">
                <li><%= link_to(t(".profile"), person_activities_path(person_id: current_user.id)) %></li>
                <li><%= link_to(t(".authentications"), authentications_path) %></li>
                <li class="divider"></li>
                <li><%= link_to(t(".signout"), signout_path, method: :delete) %></li>
              </ul>
            </li>
            <li>
              <!-- TODO: Show a list of notifications -->
              <!-- TODO: Only add label-danger when new notifications -->
              <%= link_to(notifications_path) do %>
                <span class="label label-danger" style="font-size: 100%">
                  <%= current_user.activity_object.unread_notifications_count %>
                </span>
              <% end %>
            </li>
          </ul>
        </div>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.row -->
  </div><!-- /.container -->
</nav>
